import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import { Col, Form, Input, message, PageHeader, Row } from "antd";
import Button from "antd/lib/button/button";
import { FormComponentProps } from "antd/lib/form";
import * as React from "react";
import Back from "../../images/userCenter/idCardBack.png";
import Face from "../../images/userCenter/idCardFace.png";
import ImgAvatar from "./ImgAvatar";
import moment from "moment";
import { postVerify } from "../../axios/Request";
import { RouteComponentProps } from "react-router";

const FormItem = Form.Item;
const styles = (theme: Theme) =>
  createStyles<"root" | "hiddenInput" | "formLabel">({
    root: {},
    hiddenInput: {
      visibility: "hidden"
    },
    formLabel: {
      textAlign: "right",
      color: "rgba(0, 0, 0, 0.85)",
      "& label:after": {
        content: "':'",
        margin: "0 8px 0 2px",
        position: "relative",
        top: "-0.5px"
      }
    }
  });

interface Iprops
  extends WithStyles<typeof styles>,
    FormComponentProps,
    RouteComponentProps {}
interface Istatus {
  status:boolean
}
class Certification extends React.Component<Iprops,Istatus> {
  public formData: any;

  constructor(props: Iprops) {
    super(props);
    this.formData = {};
    this.state = {
      status:false
    }
  }

  public componentWillMount() {}

  // 点击图片触发upload

  // 提交
  public handleSubmit = (e: any) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const time = moment().format("YYYY-MM-DD HH:mm:ss");
        const id = localStorage.getItem("userId");
        this.formData.applicateTime = time;
        this.formData.state = 0;
        this.formData.userId = id;
        console.log(this.formData);
        if (this.formData.aboveUrl !== "" && this.formData.belowUrl !== "") {
          this.formData = Object.assign(this.formData, values);
          postVerify(this.formData).then(value => {
            message.success("身份信息已提交成功，请等待审核！");
            this.props.history.push("/user-info/account-setting");
          });
        } else {
          message.warning("请上传身份证图片！");
        }
      }
    });
  };
  public getImgUrl = (key: any, url: any) => {
    const imgUrl: any = {};
    imgUrl[key] = url;
    this.formData = Object.assign(this.formData, imgUrl);
  };

  // 验证身份证
  public valiIdCard = (rule: any, value: any, callback: any) => {
    const reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;
    if (!reg.test(value)) {
      callback("身份证格式有误，请重新输入");
    }
    callback();
  };

  public render() {
    const { getFieldDecorator } = this.props.form;
    const { classes } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    };

    return (
      <div className={classes.root}>
        <PageHeader title="实名认证" subTitle="" />
        <Form onSubmit={this.handleSubmit}>
          <FormItem {...formItemLayout} label="真实姓名">
            {getFieldDecorator("realName", {
              rules: [
                {
                  required: true,
                  message: "请填写姓名",
                  min: 2,
                  max: 6
                }
              ]
            })(<Input placeholder="" style={{ width: "255px" }} />)}
          </FormItem>
          <FormItem {...formItemLayout} label="身份证号">
            {getFieldDecorator("idCard", {
              rules: [
                {
                  required: true,
                  message: "请填写身份证"
                },
                {
                  validator: this.valiIdCard
                }
              ]
            })(<Input placeholder="" style={{ width: "255px" }} />)}
          </FormItem>
          <Row>
            <Col span={5} className={classes.formLabel}>
              <label htmlFor="">上传身份证</label>
            </Col>
            <Col span={16}>
              <Col span={12}>
                <ImgAvatar
                  upLoadType="aboveUrl"
                  imgBg={Face}
                  getImgUrl={this.getImgUrl}
                />
              </Col>
              <Col span={12}>
                <ImgAvatar
                  upLoadType="belowUrl"
                  imgBg={Back}
                  getImgUrl={this.getImgUrl}
                />
              </Col>
            </Col>
          </Row>
          <FormItem
            wrapperCol={{
              xs: { span: 24, offset: 0 },
              sm: { span: 16, offset: 8 }
            }}
          >
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}

export default Form.create()(withStyles(styles)(Certification));
